<template>
  <Designer :engine="engine">
    <StudioPanel>
      <div slot="logo">表单编辑器</div>
      <div slot="actions">
        <el-button @click="handleSave" type="default">保存</el-button>
        <el-button type="primary">发布</el-button>
      </div>
      <CompositePanel>
        <CompositePanelItem title="组件" icon="ComponentIcon-path">
          <ResourceWidget title="输入组件" :sources="sources.inputs" />
          <ResourceWidget title="布局组件" :sources="sources.layouts" />
          <ResourceWidget title="自增组件" />
          <ResourceWidget title="展示组件" />
        </CompositePanelItem>
        <CompositePanelItem title="大纲树" icon="Outline">
          <OutlineTreeWidget />
        </CompositePanelItem>
        <CompositePanelItem title="历史记录" icon="History">
          <HistoryWidget />
        </CompositePanelItem>
      </CompositePanel>
      <Workspace id="form">
        <WorkspacePanel>
          <ToolbarPanel>
            <DesignerToolsWidget />
            <ViewToolsWidget :use="['DESIGNABLE', 'JSONTREE', 'PREVIEW']" />
          </ToolbarPanel>
          <ViewportPanel>
            <ViewPanel type="DESIGNABLE">
              <ComponentTreeWidget :components="components" />
            </ViewPanel>
            <ViewPanel type="JSONTREE">
              <template v-slot:default="slotProps">
                <SchemaEditorWidget
                  :tree="slotProps.tree"
                  @change="slotProps.onChange"
                />
              </template>
            </ViewPanel>
            <ViewPanel type="PREVIEW">
              <template v-slot:default="slotProps">
                <PreviewWidget :tree="slotProps.tree" />
              </template>
            </ViewPanel>
          </ViewportPanel>
        </WorkspacePanel>
      </Workspace>
      <SettingsPanel>
        <SettingsForm></SettingsForm>
      </SettingsPanel>
    </StudioPanel>
  </Designer>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import {
  Designer,
  StudioPanel,
  CompositePanel,
  Workspace,
  SettingsPanel,
  ResourceWidget,
  OutlineTreeWidget,
  HistoryWidget,
  WorkspacePanel,
  ToolbarPanel,
  ViewportPanel,
  ViewPanel,
  DesignerToolsWidget,
  ViewToolsWidget,
  ComponentTreeWidget,
  SchemaEditorWidget,
  PreviewWidget,
  CompositePanelItem
} from '../packages/vue'

import { SettingsForm } from '../packages/vue-settings-form'

import { createDesigner, GlobalRegistry } from '@designable/core'
GlobalRegistry.setDesignerLanguage('zh-cn')

import {
  Input,
  Field,
  Form,
  Password,
  InputNumber,
  Rate,
  Select,
  TreeSelect,
  TimePicker,
  DatePicker,
  Radio,
  Cascader,
  Switch,
  Upload,
  Transfer,
  Checkbox,
  Card
} from '../packages/element-ui'
export default defineComponent({
  name: 'Editor',
  components: {
    Designer,
    StudioPanel,
    CompositePanel,
    Workspace,
    SettingsPanel,
    SettingsForm,
    CompositePanelItem,
    ResourceWidget,
    OutlineTreeWidget,
    HistoryWidget,
    WorkspacePanel,
    ToolbarPanel,
    ViewportPanel,
    ViewPanel,
    DesignerToolsWidget,
    ViewToolsWidget,
    ComponentTreeWidget,
    SchemaEditorWidget,
    PreviewWidget
  },
  setup() {
    const engine = createDesigner({
      rootComponentName: 'Form'
    })
    return {
      engine,
      components: {
        Input,
        Field,
        Form,
        Password,
        InputNumber,
        Rate,
        Select,
        TreeSelect,
        TimePicker,
        DatePicker,
        Radio,
        Cascader,
        Switch,
        Upload,
        Transfer,
        Checkbox,
        Card
      },
      sources: {
        inputs: [
          Input,
          Password,
          InputNumber,
          Rate,
          Select,
          TreeSelect,
          TimePicker,
          DatePicker,
          Radio,
          Checkbox,
          Cascader,
          Switch,
          Upload,
          Transfer
        ],
        layouts: [Card]
      }
    }
  },
  methods: {
    handleSave() {
      const instance = this.$root
      const router = this.$globalRouter
      router?.back()
      instance.$destroy()
      instance.$el.innerHTML = ''
    }
  }
})
</script>

<style></style>
